<template>
    <div class="cinema-list">
        <h2>
            {{item.title}}&nbsp;<span class="price-n">{{item.price.n}}</span>&nbsp;<span class="price-q">{{item.price.q}}</span>
        </h2>
        <div class="address">
            <p>{{item.location}}</p>
            <div v-if="locationData">{{item.distance}}</div>
        </div>
        <div class="services" v-if="item.services.length>0">
            <div v-for="(tag,index) in item.services" :key="index">
                <van-tag plain :type="tag.code=='snack'||tag.code=='vipTag'?'warning':'primary'">{{tag.text}}</van-tag>
            </div>
        </div>
        <div class="discount" v-if="item.discount.length>0">
            <img :src="imgUrl"/>
            <span>{{item.discount[0].text}}</span>
        </div>
    </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
    props:{
        item:Object
    },
    computed:{
        ...mapState(['locationData']),
        imgUrl(){
            let src='https:'+this.item.discount[0].card;
            return src;
        }
    }
}
</script>

<style lang="less" scoped>
.cinema-list{
    padding: 16px;
    padding-left: 0;
    margin-left: 16px;
    position: relative;
    overflow: hidden;

    &::after{
        content: "";
        position: absolute;
        width: 100%;
        border-bottom: 1px solid #eee;
        bottom: 0;
        left: 0;
    }

    h2{
        color: #000;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;

        span{
            font-size: 18px;
            color: #f03d37;

            &.price-q{
                font-size: 13px;
            }
        }
    }

    .address{
        display: flex;
        line-height: 25px;
        font-size: 13px;
        color: #666;

        p{
            flex: 1;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        div{
            padding-left: 5px;
        }
    }

    .services{
        display: flex;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        padding-bottom: 5px;

        div{
            margin-right: 3px;
        }
    }

    .discount{
        font-size: 12px;
        color: #999;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;

        img{
            display: inline-block;
            width: 15px;
            height: 14px;
            vertical-align: text-bottom;
        }
    }
}
</style>